<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单对象属性过滤选择器</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css">
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>

    <script type="text/javascript">
        /**
         :input
         :text
         :password
         :radio
         :checkbox
         :submit
         :image
         :reset
         :button
         :file
         :hidden

         表单对象的属性
         :enabled
         :disabled
         :checked
         :selected
         */

        $(function(){
            //1.对表单内 可用input操作
            $("#btn1").click(() => {
                //val()可以操作表单项的value属性值
                //他可以设置和获取
                //可以输入的输入框
                $(":text:enabled").val("我是万能的程序员");
            });

            //2.对表单内 不可用input赋值操作
            $("#btn2").click(() => {
                $(":text:disabled").val("管你可用不可用,反正我是万能的程序员");
            });

            //3.获取多选框中的个数,使用size()方法获取到的元素集合的元素个数
            $("#btn3").click(() => {
                alert($(":checkbox:checked").length);
            });

            //4.获取多选框,每个选中的value值
            $("#btn4").click(function (){
                //获取全部选中的复选框的标签对象
                var $checkboxes = $(":checkbox:checked");
                // alert($checkboxes.length);
                //老式遍历
                // for(var i = 0 ; i < $checkboxes.length ; i++){
                //     alert($checkboxes[i].value);
                // }

                //使用jquery进行遍历
                $checkboxes.each((e,data) => {
                    alert($(data).val())
                });
            });

            //5.获取下拉框选中的内容
            $("#btn5").click(() => {
                //获取选中的option标签对象
                var $options = $("select option:selected");
                //遍历,获取option标签中的文本内容
                $options.each((e,d) => {
                    //在each遍历的function函数中,有一个this对象,这个this对象就是当前正在遍历的dom对象
                    console.log($(d).val())
                });
            });
        })
    </script>
</head>
<body>

<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取多选框选中的内容.</button><br /><br />
<button id="btn5">获取下拉框选中的内容.</button><br /><br />

<form id="form1" action="#">
    可用元素: <input name="add" value="可用文本框1"/><br>
    不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
    可用元素: <input name="che" value="可用文本框2"/><br>
    不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
    <br>

    多选框: <br>
    <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
    <input type="checkbox" name="newsletter" value="test2" />test2
    <input type="checkbox" name="newsletter" value="test3" />test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
    <input type="checkbox" name="newsletter" value="test5" />test5

    <br><br>
    下拉列表1: <br>
    <select name="test" multiple="multiple" style="height: 100px" id="sele1">
        <option>浙江</option>
        <option selected="selected">辽宁</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>

    <br><br>
    下拉列表2: <br>
    <select name="test2">
        <option>浙江</option>
        <option>辽宁</option>
        <option selected="selected">北京</option>
        <option>天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
</form>

</body>
</html>